<template>
  <div class="activityBox">
    <van-nav-bar
      class="head"
      title="活动分享"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="main">
      <div class="up">
        <h5>新品炭烧腰果试尝（深圳实体店）</h5>
        <van-row gutter="8" style="margin: 12px 0">
          <van-col span="9" style="font-size: 12px">2021-12-10</van-col>
          <van-col span="9" style="font-size: 12px">深圳福田志愿者分队</van-col>
          <van-col span="6" style="font-size: 12px">体察活动</van-col>
        </van-row>
        <van-divider />
      </div>

      <div class="center">
        <p>
          新华社哈尔滨12月6日电（记者杨思琪、徐凯鑫）微电影、图片展、视频分享、线上互动……面对“00后”学生，一些高校思政课不断深挖内涵、创新形式，增加互动式、体验式教学，推进党的十九届六中全会精神入脑入心。
        </p>
        <van-image
          width="352px"
          height="208px"
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.biangejia.com%2Fwp-content%2Fuploads%2F2017%2F03%2F201622142015.jpg&refer=http%3A%2F%2Fimg.biangejia.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642814305&t=d2d668019e1af7a857fd9f5f485e4d37"
        />
        <p>
          新华社哈尔滨12月6日电（记者杨思琪、徐凯鑫）微电影、图片展、视频分享、线上互动……面对“00后”学生，一些高校思政课不断深挖内涵、创新形式，增加互动式、体验式教学，推进党的十九届六中全会精神入脑入心。
        </p>
        <van-image
          width="352px"
          height="208px"
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171128%2F5488c64fff614fd59b849bdb360b51da.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642814439&t=b7d5c9131c303fc6d3ff9026dad85680"
        />

        <van-button type="primary" size="large" round class="van-b"
          >志愿者申请</van-button
        >
      </div>

      <div class="down">
        <van-row type="flex" class="left">
          <van-col span="1"></van-col>
          <van-col span="23">
            <div>
              <span>浏览量</span>
              <span>点赞</span>
              <span>评论</span>
              <span is-link @click="showPopup"> 关注 </span>
              <span>分享</span>
            </div>
          </van-col>
        </van-row>
        <van-divider />
      </div>
    </div>

    <div class="comments">
      <div class="up">
        <van-row type="flex">
          <van-col span="4" style="text-align: right">
            <van-image
              round
              cover
              width="48px"
              height="48px"
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14064120875%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642816508&t=bbd9ee10430d00c6bb5dbcef3976c0c1"
            />
          </van-col>

          <van-col span="17">
            <div class="word">
              <p>海洋里的小虾米</p>
              <p>2021-12-10 15:44</p>
            </div>
          </van-col>

          <van-col span="3">
            <van-button type="primary" size="mini">删除</van-button>
          </van-col>
        </van-row>
      </div>

      <div class="center">
        <van-divider />
        <van-row type="flex">
          <van-col span="3"></van-col>
          <van-col span="20">
            <router-link to="comments">
              <p>
                分享内容：我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
              </p>
            </router-link>
          </van-col>
          <van-col span="1"></van-col>
        </van-row>
      </div>

      <van-divider />
    </div>

    <div class="comments">
      <div class="up">
        <van-row type="flex">
          <van-col span="4" style="text-align: right">
            <van-image
              round
              cover
              width="48px"
              height="48px"
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp2.itc.cn%2Fq_70%2Fimages03%2F20211021%2F47a0623da1f24d8e8ed8a5bc60f126dc.png&refer=http%3A%2F%2Fp2.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642816508&t=a40bf544920252455e5e9679a53b9318"
            />
          </van-col>

          <van-col span="17">
            <div class="word">
              <p>海洋里的小虾米</p>
              <p>2021-12-10 15:44</p>
            </div>
          </van-col>

          <van-col span="3">
            <van-button type="primary" size="mini">删除</van-button>
          </van-col>
        </van-row>
      </div>

      <div class="center">
        <van-divider />
        <van-row type="flex">
          <van-col span="3"></van-col>
          <van-col span="20">
            <p>
              分享内容：我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
            </p>
          </van-col>
          <van-col span="1"></van-col>
        </van-row>
      </div>
      <van-divider />
    </div>

    <!-- 底部 -->
    <div class="footer">
      <van-tabbar>
        <van-field center autosize clearable placeholder="请输入内容">
          <template #button>
            <van-button size="small" type="primary">评论</van-button>
          </template>
        </van-field>
      </van-tabbar>
    </div>

    <!-- 关注成功弹框 -->
    <van-popup v-model="show">
      <span style="display: inline-block; width: 6.5em; height: 1.5em">
        <van-icon name="success" color="rgba(67, 207, 124, 1)" />
        关注成功
      </span>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
    onClickLeft() {
      this.$router.push("/follow");
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  p {
    line-height: 20px;
    font-size: 10px;
    text-align: left;
  }
  .van-divider {
    margin: 0;
    background-color: #999;
  }
  
}
.activityBox {
  text-align: center;
  a{
    text-decoration: none;
    color: #000;
  }
  .head {
    width: 100%;
    height: 51px;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(239, 239, 239, 1);
    position: fixed;
    top: 0;
  }
  /deep/.van-nav-bar .van-icon {
    color: #fff;
  }
  /deep/.van-nav-bar__title {
    color: #fff;
    font-size: 18px;
  }
  .van-nav-bar {
    background-color: rgba(67, 207, 124, 1);
    color: #fff;
    font-size: 16px;
    .van-nav-bar__title {
      color: #fff;
    }
  }
  .main {
    margin-top: 70px;
    .center {
      p {
        font-size: 14px;
        padding: 12px;
      }
      .van-button {
        width: 354px;
        height: 40px;
        margin: 8px 0;
      }
    }
    p {
      font-size: 14px;
      padding: 16px;
      line-height: 20px;
    }
    .van-button {
      width: 352px;
      height: 40px;
      color: rgba(255, 255, 255, 1);
      background-color: rgba(42, 131, 78, 1);
      margin: 12px 10px;
      border: none;
    }
  }
  .down {
    span {
      font-size: 10px;
      display: inline-block;
      margin: 8px 10px;
    }
  }
}
.comments {
  .van-image {
    margin: 8px 4px;
  }
  .van-button--primary {
    margin-top: 16px;
    color: #333;
    background: #fff;
    border: none;
  }
}

.van-tabbar {
  width: 100%;
  height: 50px;
  .van-cell {
    background-color: #eee;
  }
}
.footer {
  position: fixed;
  height: 30px;
}
</style>